<template>
    <a
        :class="className"
        class="link--mallki"
        href="#"
    >
        {{ text }}
        <span :data-letters="text" />
        <span :data-letters="text" />
    </a>
</template>

<script>
export default {
	props: {
		className: {
			type: String,
			default: ''
		},
		text: {
			type: String,
			default: 'vue-element-admin'
		}
	}
}
</script>

<style>
/* Mallki */

.link--mallki {
	font-weight: 800;
	color: #4dd9d5;
	font-family: 'Dosis', sans-serif;
	-webkit-transition: color 0.5s 0.25s;
	transition: color 0.5s 0.25s;
	overflow: hidden;
	position: relative;
	display: inline-block;
	line-height: 1;
	outline: none;
	text-decoration: none;
}

.link--mallki:hover {
	-webkit-transition: none;
	transition: none;
	color: transparent;
}

.link--mallki::before {
	content: '';
	width: 100%;
	height: 6px;
	margin: -3px 0 0 0;
	background: #3888fa;
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.link--mallki:hover::before {
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
}

.link--mallki span {
	position: absolute;
	height: 50%;
	width: 100%;
	left: 0;
	top: 0;
	overflow: hidden;
}

.link--mallki span::before {
	content: attr(data-letters);
	color: red;
	position: absolute;
	left: 0;
	width: 100%;
	color: #3888fa;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.link--mallki span:nth-child(2) {
	top: 50%;
}

.link--mallki span:first-child::before {
	top: 0;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}

.link--mallki span:nth-child(2)::before {
	bottom: 0;
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
}

.link--mallki:hover span::before {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
</style>
